<template>
  <div id="conentpage" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small"><i class="el-icon-back"></i>返回列表</el-button>
      <el-row class="warp">
        <el-col :span="24" class="warp-main">
          <el-form ref="infoForm" :model="infoForm" label-width="140px">
            <el-form-item label="会议主题:" prop="name">
              <el-input v-model="infoForm.title" placeholder="会议主题"></el-input>
            </el-form-item>
            <el-form-item label="会议时间:" prop="time">
              <el-date-picker type="date"
                              placeholder="选择会议时间"
                              v-model="infoForm.time"
                              :picker-options="pickerOptions1"
                              value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="会议时间段:">
              <el-select v-model="timeListValue" placeholder="会议时间段" multiple style="width: 100%">
                <el-option :label="item.stringOption" :value="item.id" v-for="(item, index) in timeList"
                           :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="主持人:">
              <span v-if="applyUserBox" class="mr-10">{{ applyUserBox ? applyUserBox.realname : '' }}</span>
              <el-button size="small" @click="cornerUserFn">选择会议主持人</el-button>
            </el-form-item>
            <el-form-item label="参与人员:">
              <el-button type="primary" @click="chooseStudent" class="mb-10" size="small">选择参与人员</el-button>
              <div>
                <el-tag
                    :key="tag"
                    v-for="(tag,index) in dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index)"
                    class="mr-10"
                >{{ tag }}
                </el-tag>
              </div>
            </el-form-item>
            <el-form-item label="会议简介:" prop="description">
              <el-input v-model="infoForm.description" placeholder="会议简介" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="会议视频:" prop="description" v-if="id">
              <div v-if="videoList.length">
                <p v-for="(item,index) in videoList" @click="showVideoMeetFn(item.video)" class="video-list">
                  视频{{ index + 1 }}</p>
              </div>
              <div v-else>暂无</div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确认提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--    <teacherMultiple :visible.sync="studentVisible" @studentFn="studentFn" :userclassId="infoForm.class_id"-->
    <!--                     :usersectionId="infoForm.section_id" :dynamicTagsArray="dynamicTagsArray"></teacherMultiple>-->
    <!--    <cornerUser :visible.sync="cornerUserVisible" @cornerUserFile="cornerUserFile"></cornerUser>-->
    <activeVideoDialog :videosrcCheck="videosrcCheck" :visible.sync="dialogvideoVisible"></activeVideoDialog>
    <singleTeacherModle :visible.sync="cornerUserVisible" @studentFn="cornerUserFile"
                        :dynamicTagsArray="dynamicTagsArray"></singleTeacherModle>
    <MultipleTeacherModle :visible.sync="studentVisible" @studentFn="studentFn" :userclassId="infoForm.class_id"
                          :usersectionId="infoForm.section_id"
                          :dynamicTagsArray="dynamicTagsArray"></MultipleTeacherModle>
  </div>
</template>

<script>
import teacherMultiple from '@/components/dialog/teacherMultiple.vue'
import cornerUser from '@/components/dialog/cornerUser.vue'
import activeVideoDialog from '@/components/dialog/activeVideoDialog.vue'

export default {
  data() {
    return {
      id: this.$route.query.id,
      applyUserBox: null,
      cornerUserVisible: false,
      videosrcCheck: '',
      dialogvideoVisible: false,
      infoForm: {
        title: '', // 	字符串 	必填 	1 	- 	标题
        description: '', // 	字符串 	必填 	1 	- 	简介
        user_id: '', // 	字符串 	必填 	1 	- 	负责人
        join_user: '', // 	字符串 	必填 	1 	- 	参与人
        time: '', // 	字符串 	必填 	1 	- 	会议时间
        word: '',
        pic: ''
      },
      radio: 1,
      // 限制时间选择
      pickerOptions1:
          {
            disabledDate(time) {
              return time.getTime() < Date.now() - 8.64e7
            }
          },
      studentVisible: false,
      dynamicTags:
          [],
      dynamicTagsId:
          [],
      dynamicTagsArray:
          {},
      videoList: [],
      timeListValue: [],
      timeList: []
    }
  },
  mounted() {
  },
  created() {
    // type 1 我的会议 2 会议管理
    console.log('详情页面数据内容', this.$route.query)
    if (this.$route.query.id) {
      this.getEdit()
    }
    this.getTimeList()
  },
  methods: {
    // 会议时间段
    getTimeList() {
      // 日期
      // 时间段
      this.$fetch(this.api.schedule.scheduleHour, {status: 1}).then((response) => {
        if (response.code === 0) {
          for (let i in response.list) {
            response.list[i].stringOption = response.list[i].start_time + '-' + response.list[i].end_time
          }
          this.timeList = response.list
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    async getEdit() {
      let data = await this.$post(this.api.videoMeet.edit, {id: this.$route.query.id})
      console.log('详情：', data)

      this.dynamicTags = []
      this.dynamicTagsId = []
      for (let i in data.vo.join_user) {
        this.dynamicTags.push(data.vo.join_user[i].realname)
        this.dynamicTagsId.push(data.vo.join_user[i].id)
        this.dynamicTagsArray[data.vo.join_user[i].id] = this.tranfromJson(data.vo.join_user[i])
      }
      this.infoForm.join_user = this.dynamicTagsId.join(',')

      this.infoForm.title = data.vo.title
      this.infoForm.description = data.vo.description
      this.infoForm.time = data.vo.time
      this.applyUserBox = this.tranfromJson(data.vo.user)
      this.videoList = data.video
    },
    onEditorReady(editor) {
    },
    onSubmit() {
      // 提交 this.$refs.infoForm.validate，这是表单验证
      console.log('数据提交', this.infoForm, this.timeListValue)
      // let state = 1
      // if(state){
      //   return
      // }
      if (!this.infoForm.title) {
        this.$message.error('填写会议主题')
        return false
      }
      if (!this.infoForm.time) {
        this.$message.error('选择会议时间')
        return false
      }
      if (!this.timeListValue.length) {
        this.$message.error('选择会议时间段')
        return false
      }
      if (!this.infoForm.time) {
        this.$message.error('选择会议主持人')
        return false
      }
      if (!this.infoForm.time) {
        this.$message.error('选择会议参与人员')
        return false
      }
      this.materielImport()
    },
    tranfromJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 添加会议
    async materielImport(path) {
      let data_  = JSON.parse(JSON.stringify(this.infoForm))
      data_.timeLine = this.timeListValue.join(',')
      let data = await this.$post(this.api.videoMeet.add, this.infoForm)
      if (data.code === 0) {
        for (let i in this.infoForm) {
          this.infoForm[i] = ''
        }
        this.applyUserBox = null
        this.$message.success(data.msg)
      }
    },
    chooseStudent() {
      this.studentVisible = true
    },
    studentFn(option) {
      console.log('获取教师信息L:', option)
      this.dynamicTags = []
      this.dynamicTagsId = []
      for (let i in option) {
        this.dynamicTags.push(option[i].realname)
        this.dynamicTagsId.push(option[i].id)
        this.dynamicTagsArray = option
      }
      this.infoForm.join_user = this.dynamicTagsId.join(',')
    },
    handleClose(index) {
      this.dynamicTags.splice(index, 1)
      delete this.dynamicTagsArray[this.dynamicTagsId[index]] // 去除选中的人
      this.dynamicTagsId.splice(index, 1)
      this.infoForm.users = this.dynamicTagsId.join(',')
    },
    beforeAvatarUpload(file) {
      console.log('上传数据excel：', file)
      // const isLt2M = file.size / 1024 / 1024 < 2
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!')
      // }
      // return isLt2M
    },
    handleSuccess(response) {
      this.infoForm.appendix = response.data.pic
    },
    handleRemove(file, fileList) {
      console.log('移除', file, fileList)
      this.infoForm.appendix = ''
    },
    cornerUserFn() {
      this.cornerUserVisible = !this.cornerUserVisible
    },
    cornerUserFile(option) {
      console.log('选中的负责人：', option)
      this.applyUserBox = option
      this.infoForm.user_id = option.id
    },
    showVideoMeetFn(option) {
      this.videosrcCheck = option
      this.dialogvideoVisible = true
    },
    backlist() {
      this.$router.go(-1)
    },
  },
  components: {
    teacherMultiple,
    cornerUser,
    activeVideoDialog
  }
}
</script>
<style scoped>
.ql-editor {
  max-height: 250px;
}

.el-dialog__body {
  padding: 0 20px;
}

.el-radio__label {
  /*display: none;*/
}

.warp {
  width: 80%;
  padding: 30px;
  margin: 0 auto;
}

.el-dialog__body {
  /*text-align: center;*/
}

.el-pagination {
  padding-top: 20px;
}


.video-list:hover {
  color: #1b8de5;
  text-decoration: underline;
  cursor: pointer;
}

.video-list {
  width: 100px;
  text-align: center;
  background: #eee;
  border-radius: 3px;
  margin-bottom: 3px;
}
</style>
